<template>
  <div class="login_box">
    <div class="login_contatiner">
      <div  class="login_form">
        <el-form  :model="registerForm" :rules="registerFormRules" ref="registerForm"  class="demo-form-inline">
          <el-form-item prop="storeUserPhone">
            <el-input v-model="registerForm.storeUserPhone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item prop="note">
            <el-input placeholder="请输入验证码" v-model="registerForm.note">
              <template slot="append">
                <el-button type="primary" style="width:150px;" v-if="show" @click="sendCode">获取验证码</el-button>
                <el-button type="primary"  style="width:150px;" v-if="!show">{{count}}秒后重新发送</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" style="width:100%;" @click="registerBtn('registerForm')">注册并登录</el-button>
          </el-form-item>
          <p class="login-tips" @click="goLogin">已有帐号？立即登录</p>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {registerStoreUserPhonePort,sendNote} from '@/api/login'
  export default {
    name: "index",
    data(){
      return{
        show:true,
        count:'',
        timer: null,
        registerForm:{},
        registerFormRules:{
          storeUserPhone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
          ],
          note: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
          ],
        },
      }
    },
    mounted(){
      if(localStorage.getItem('token')!='' &&localStorage.getItem('token')!=null&&localStorage.getItem('token')!=undefined){
        this.$router.push('/statistics')
      }
      this.getIPCity()
    },
    methods:{
      goLogin(){
        this.$router.push('/login')
      },
      getCode() {
        const num = 3;
        if (!this.timer) {
          this.count = num;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= num) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }

      },
      // 获取ip所在城市、区等信息
      getIPCity() {
        let that=this

        var data = {
          key: 'KSPBZ-V5L33-5EM3D-35N5X-DIY66-CRF7J', //密钥
        }
        var url = 'https://apis.map.qq.com/ws/location/v1/ip' //腾讯地理位置信息接口
        data.output = 'jsonp' // 解决跨域问题
        this.$jsonp(url, data).then((res) => {
          this.registerForm.ip=res.result.ip
          return res
        }).catch((error) => {})

      },
      async  sendCode(){
        let body={
          storeUserPhone:this.registerForm.storeUserPhone
        }
        let res = await sendNote({body})
        this.getCode()
        this.$message.success(res.body)
      },
      registerBtn(formName){
        this.$refs[formName].validate(async (valid) => {

          if (valid) {
            let body={
              ...this.registerForm,
              logType:1
            }
            let res = await registerStoreUserPhonePort({body})
            if (res.code=='2000'){
              window.localStorage.token=res.body.token
              this.$alert('恭喜您注册成功，默认密码为st12346，请及时修改密码！', '注册成功', {
                confirmButtonText: '确定',
                callback: action => {
                  this.$router.push('/statistics')
                }
              });

            }else{
              this.$message.error(res.msg)
            }

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }
</script>

<style scoped>
  .login_box{
    width: 100%;
    height: 100%;
    background: url("../../assets/login_bg.jpg") 0 0 no-repeat;
    position: fixed;
  }
  .login_contatiner{
    position: absolute;
    width: 1000px;
    height: 500px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin:auto;
    background: url("../../assets/login_bg1.jpg") 0 0 no-repeat;
    background-size: 100%;
  }
  .login_form{
    position: absolute;
    width: 300px;
    right: 79px;
    top: 150px;
  }
  .copyright{
    position: fixed;
    bottom:20px;
    text-align: center;
    width: 100%;
  }
  .login-tips{
    font-size: 14px;
    float: right;
    cursor: pointer;
  }
  .login-tips:hover{
    text-decoration: underline;
    color: #409EFF;
  }
</style>
